<!-- 公共可实时输入 子组件 -->
<template>
  <div
    class="editable-textarea"
    :class="{'hover':editTitleBtnAreaControl}"
    :contenteditable="isEditable"
    @input="handleInput"
    @focus="handleFocus"
    @blur="handleBlur"
     @mouseover.stop="handleTitleMouseover($event)"
      @mouseout.stop="handleTitleMouseout($event)"
    ref="editableDiv"
  >
    {{ initialText }}
    <!-- 定位编辑按钮 -->
    <div v-show="editTitleBtnAreaControl" class="edit-trigger" ref="editTrigger"  @click.stop="editClick('title')"
    @mousedown.stop="() => true">
      <i class="el-icon-edit" style="color: #fff;"></i>
    </div>
  </div>
</template>

<script>
export default {
  name: "EditTitle",
  props: {
    // 控制编辑标题按钮区域是否显示
    editTitleBtnAreaControl: {
      type: Boolean,
      default: false,
    },
    // 初始文本内容
    initialText: {
      type: String,
      default: "请输入内容...",
    },
    // 是否可编辑
    isEditable: {
      type: Boolean,
      default: true,
    },
    // 输入框高度
    minHeight: {
      type: String,
      default: "30px",
    },
    // 输入框宽度
    width: {
      type: String,
      default: "35%",
    },
  },
  emits: ["input", "focus", "blur", "contentChange"],
  data() {
    return {
    }
  },
  methods: {
    // 处理标题鼠标悬浮事件
    handleTitleMouseover(e) {
      this.$emit("handleTitleMouseover", e);
    },
    // 处理标题鼠标移出事件
    handleTitleMouseout(e) {
      console.log('子组件中移除了',e);
      // this.containerBtnAreaControl = !this.containerBtnAreaControl;
      this.$emit("handleTitleMouseout", e);
    },
    // 处理输入事件
    handleInput() {
      const content = this.$refs.editableDiv.textContent;
      this.$emit("input", content);
      this.$emit("contentChange", content);
    },
    // 处理聚焦事件
    handleFocus() {
      this.$emit("focus");
    },
    // 处理失焦事件
    handleBlur() {
      this.$emit("blur");
    },
    // 提供外部获取内容的方法
    getContent() {
      return this.$refs.editableDiv.textContent;
    },
    // 提供外部设置内容的方法
    setContent(text) {
      this.$refs.editableDiv.textContent = text;
    },
    // 编辑点击事件
    editClick(type) {
      this.$emit("editClick", type);
    }
  },
  mounted() {
    // 初始化样式
    this.$refs.editableDiv.style.minHeight = this.minHeight;
    this.$refs.editableDiv.style.width = this.width;
  },
};
</script>

<style scoped lang="scss">
.editable-textarea.hover {
  border: 1px dotted#348CF8;
  // &:hover {
  //   .edit-trigger {
  //     display: block;
  //   }
  // }
}
// 编辑标题 输入框
.editable-textarea {
  /* 站位边框 */
  position: relative;
  border: 1px solid transparent;
  line-height: 30px;
}
// 可编辑状态下的样式
.editable-textarea:focus {
  outline: 0.6px solid#348CF8;
}
// 不可编辑状态下的样式
.editable-textarea[contenteditable="false"] {
  background-color: #f5f5f5;
  cursor: not-allowed;
}
// 编辑按钮
.edit-trigger {
  background: rgba(51, 51, 51, 0.9);
  vertical-align: top;
  cursor: pointer;
  position: absolute;
  top: 0;
  right: 0;
  height: 20px;
  line-height: 20px;
}
</style>
